<template>

  <div class="mod-demo-echarts">  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <el-alert
      title="橙色区域为当前组件所在区域"
      type="warning"
      :closable="false">

    </el-alert>
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input  placeholder="材料ID" clearable></el-input>
        <!--        v-model="dataForm.key"-->
      </el-form-item>

      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button v-if="isAuth('generator:tbasecraft:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
        <el-button v-if="isAuth('generator:tbasecraft:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
      </el-form-item>
    </el-form>


          <div id="MapBox" class="Map-box" style="height: 700px;width: 100%"></div>

  </div>
</template>





<script>
import * as echarts from 'echarts/core'
// import svg from 'WorkShop.svg'
import {
  TooltipComponent,
  VisualMapComponent,
  GeoComponent
} from 'echarts/components'
import { MapChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  CanvasRenderer
])
export default {
  data () {
    return {
      MapBox: null,
      dataList: [ // 9个区域
        {name: 'SvgjsPath1287', value: 0},
        {name: 'SvgjsPath1293', value: 0},
        {name: 'SvgjsPath1299', value: 60},
        {name: 'SvgjsPath1305', value: 0},
        {name: 'SvgjsPath1311', value: 0},
        {name: 'SvgjsPath1317', value: 0},
        {name: 'SvgjsPath1323', value: 0},
        {name: 'SvgjsPath1329', value: 0},
        {name: 'SvgjsPath1335', value: 0}
      ],
      svg: null
    }
  },
  mounted () {
    this.initMapBox()
  },
  activated () {
    this.initMapBox()
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.MapBox) {
      this.MapBox.resize()
    }
  },
  methods: {
    initMapBox: function () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/WorkDemo2.svg'),
        method: 'get'
      }).then(({data}) => {
        if (data && data) {
          this.dataList.svg = data
          echarts.registerMap('Beef_cuts_France', {svg: this.dataList.svg})
          var option = {
            visualMap: {
              left: 'center',
              bottom: '0%',
              min: 0,
              max: 100,
              text: ['', '实时位置'],
              orient: 'horizontal',
              realtime: true,
              calculable: false,
              itemWidth: 0,
              itemHeight: 0,
              show: false,
              inRange: {
                color: ['#FFFFFF', '#db6e00', '#cf0000']
              }
            },
            series: [
              {
                name: 'Beef_cuts_France',
                type: 'map',
                map: 'Beef_cuts_France',
                roam: true,
                emphasis: {
                  label: {
                    show: false
                  }
                },
                selectedMode: false,
                data: this.dataList
              }
            ]
          }
          this.MapBox = echarts.init(document.getElementById('MapBox'))
          this.MapBox.setOption(option)
          window.addEventListener('resize', () => {
            this.MapBox.resize()
          })
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
